"use server";
import "./index.css";
import { listQuestionBankVoByPageUsingPost } from "@/api/questionBankController";
import Title from "antd/es/typography/Title";
import { Flex, Menu, message, Space } from "antd";
import Link from "next/link";
import {
  getQuestionHotUsingPost,
  listQuestionVoByPageUsingPost,
} from "@/api/questionController";
import QuestionBankList from "@/components/QuestionBankList";
import QuestionList from "@/components/QuestionList";
import Sider from "antd/es/layout/Sider";
import { FireOutlined } from "@ant-design/icons";
export default async function HomePage() {
  let questionBankList = [];
  try {
    const res = await listQuestionBankVoByPageUsingPost({
      pageSize: 12,
      sortField: "createTime",
      sortOrder: "desc",
    });
    // @ts-ignore
    questionBankList = res.data.records ?? [];
  } catch (e) {
    // @ts-ignore
    message.error("获取题库列表失败" + e);
  }
  let questionList = [];
  try {
    const res = await listQuestionVoByPageUsingPost({
      pageSize: 12,
      sortField: "createTime",
      sortOrder: "desc",
    });
    // @ts-ignore
    questionList = res.data.records ?? [];
  } catch (e) {
    // @ts-ignore
    message.error("获取题目列表失败" + e);
  }

  let bank = undefined;
  try {
    const res = await getQuestionHotUsingPost();
    bank = res.data;
    console.log(res);
  } catch (e) {
    // @ts-ignore
    message.error("获取题库列表失败，" + e.message);
  }
  //题目菜单列表
  // @ts-ignore
  const questionMenuItemList = (bank || []).map((q) => {
    return {
      label: <Link href={`/question/${q.id}`}>{q.title}</Link>,
      key: q.id,
    };
  });

  return (
    <div id="homePage" className="max-width-content">
      <div style={{ display: "flex" }}>
        <div style={{ marginRight: 15 }}>
          <Sider width={240} theme="light" style={{ padding: "24px 0" }}>
            <Title level={4} style={{ marginLeft: 10 }}>
              热门题目榜
              <Space
                style={{
                  color: "#ff7b00", // 使用亮橙色
                  fontWeight: 600, // 加粗字体
                  fontSize: "14px", // 文字尺寸
                  alignItems: "center", // 垂直居中
                  cursor: "pointer", // 手型光标
                }}
              >
                <FireOutlined style={{ fontSize: "16px" }} />
                <span>HOT</span>
              </Space>
            </Title>
            <Menu items={questionMenuItemList} />
          </Sider>
        </div>
        <div>
          <Flex justify="space-between" align="center">
            <Title level={3}>最新题库</Title>
            <Link href={"/banks"}>查看更多</Link>
          </Flex>
          <div>
            <QuestionBankList questionBankList={questionBankList} />
          </div>
          <Flex justify="space-between" align="center">
            <Title level={3}>最新题目</Title>
            <Link href={"/questions"}>查看更多</Link>
          </Flex>
          <QuestionList questionList={questionList} />
        </div>
      </div>
    </div>
  );
}
